<template>
  <el-drawer v-model="drawer" title="课程介绍"
    size="800"
    @closed="handleClose"
  >
    <ContentBody>
      <el-form ref="refLessonContentForm">
        <el-form-item>
          <QuillEditor v-model="store.contentItem.content" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSave">保存</el-button>
        </el-form-item>
      </el-form>
    </ContentBody>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useLessonStore } from '@/stores/lesson'
import QuillEditor from '@/components/quill-editor/index.vue'
import { ElMessage } from 'element-plus';
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

const drawer = ref(false)
const router = useRouter()
const route = useRoute()
const store = useLessonStore()

const handleClose = () => {
  drawer.value = false
  router.back()
}

const handleSave = async () => {
  const result : boolean = await store.updateContent()
  if (result) {
    ElMessage.success('修改成功')
    router.back()
  }
}

onMounted(() => {
  drawer.value = true
  if (route.params.id) {
    store.loadContent(parseInt(route.params.id as string))
  } else {
    ElMessage.error('非法参数')
    router.back()
  }
})
</script>